<template>
	<div class="recommend">
		<scroll class="recommend-content" :data="discList" ref='scroll'>
			<div>

				<div class="slider-wrapper"
				  v-if="recommends.length">
						<slider>
								<div v-for="item in recommends" :key="item.id ">
									<a :href="item.linkUrl">
										<img :src="item.picUrl" alt="" @load="loadImage" class="needsclick"/>
									</a>
								</div>
						</slider>
				</div>

				<div class="recommend-list">
					<h1 class="list-title">热门歌单推荐</h1>

					<ul>
						<li v-for="item in discList" class="item">
							<div class="icon">

								<img v-lazy="item.imgurl" alt="" width="60" height="60"/>
							</div>

							<div class="text">
								<h2 class="name" v-html="item.creator.name"></h2>
								<p class="desc" v-html="item.dissname"></p>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<div class="loading-container" v-show="!discList.length">
				<loading></loading>
			</div>
		</scroll>

	</div>
</template>

<script type="text/ecmascript-6">
	import Loading from 'base/loading/loading'
	import Scroll from 'base/scroll/scroll'
	import Slider from 'base/slider/slider'
	import {getRecommend, getPlaylist} from 'api/recommend'
	import {ERR_OK} from 'api/config'


  export default {
		name: 'Recommend',
    data() {
      return {
      	recommends:[],
      	discList: []
      }
    },
    components: {
			Loading,
    	Slider,
    	Scroll

    },
    created() {
    	this._getRecommend()
    	this._getPlaylist()
    },
    methods: {
    	_getRecommend(){
    		getRecommend().then((res)=> {
    			if(res.code === ERR_OK){
    				console.log(res.data.slider);

    				this.recommends = res.data.slider
    			}
    		})
    	},

    	_getPlaylist(){
    	getPlaylist().then((res)=> {
    			if(res.code === ERR_OK){
    				console.log(res.data.list);

    				this.discList = res.data.list
    			}
    		})
   		},
   		loadImage(){
   			if(!this.checkLoaded){
   				this.$refs.scroll.refresh()
   				this.checkLoaded = true;
					//设个标志位，确保执行逻辑值执行一次
   			}

   		}
    }



  }
</script>

<style lang="stylus" scoped="scoped">
	@import "~common/stylus/variable"

	.recommend
	  position: fixed
	  width: 100%
	  top: 88px
	  bottom: 0
	  .recommend-content
	    height: 100%
	    overflow: hidden
	    .slider-wrapper
	      position: relative
	      width: 100%
	      overflow: hidden
	    .recommend-list
	      .list-title
	        height: 65px
	        line-height: 65px
	        text-align: center
	        font-size: $font-size-medium
	        color: $color-theme
	      .item
	        display: flex
	        box-sizing: border-box
	        align-items: center
	        padding: 0 20px 20px 20px
	        .icon
	          flex: 0 0 60px
	          width: 60px
	          padding-right: 20px
	        .text
	          display: flex
	          flex-direction: column
	          justify-content: center
	          flex: 1
	          line-height: 20px
	          overflow: hidden
	          font-size: $font-size-medium
	          .name
	            margin-bottom: 10px
	            color: $color-text
	          .desc
	            color: $color-text-d
	    .loading-container
	      position: absolute
	      width: 100%
	      top: 50%
	      transform: translateY(-50%)
</style>
